import * as React from 'react';
import { observer } from 'mobx-react';
import { Input, Button, Radio, Form, message } from 'antd';
import { MediaModel } from '../../../model/setting/media/MediaModel';

const RadioGroup = Radio.Group;
const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
};
const tailFormItemLayout = {
    wrapperCol: {
        span: 14,
        offset: 6,
    },
};

@observer
export class MediaEditor extends React.Component<any, { store: MediaModel }> {

    private isEditMode: boolean;

    constructor(props) {
        super(props);
        this.initState();
    }

    private initState() {
        let store: MediaModel;

        this.isEditMode = this.props.route.path !== 'create';

        if (!this.isEditMode) { // 创建
            store = new MediaModel();
        }
        else { // 编辑
            store = new MediaModel(this.props.params.id);
            store.fetchData().catch(res => {
                message.error(`数据请求失败`, 2.5);
            });
        }

        this.state = { store };
    }

    onSubmit = () => {
        this.state.store.save().then(res => {
            message.success(res.message, 2.5);
        }, res => {
            message.error(res.message, 2.5);
        });
    }

    render() {
        var { store } = this.state;

        return <Form horizontal>
            <Form.Item
                {...formItemLayout}
                validateStatus={store.nameValid ? 'success' : 'error'}
                label="媒体名称">
                <Input placeholder="请输入媒体名称" value={store.data.name} onChange={e => store.data.name = e.target["value"]} />
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                validateStatus={store.wxMpNameValid ? 'success' : 'error'}
                label="公众号名称">
                <Input placeholder="请输入公众号名称" value={store.data.wxMpName} onChange={e => store.data.wxMpName = e.target["value"]} />
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                validateStatus={store.wxMpIdValid ? 'success' : 'error'}
                label="公众号微信ID">
                <Input placeholder="请输入公众号微信ID" value={store.data.wxMpId} onChange={e => store.data.wxMpId = e.target["value"]} />
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                label="备注信息"
                validateStatus={store.noteValid ? 'success' : 'error'}>
                <Input placeholder="请输入备注信息" value={store.data.note} onChange={e => store.data.note = e.target["value"]} />
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                label="联系方式"
                validateStatus={store.contactInfoValid ? 'success' : 'error'}>
                <Input placeholder="请输入联系方式" value={store.data.contactInfo} onChange={e => store.data.contactInfo = e.target["value"]} />
            </Form.Item>
            <Form.Item {...tailFormItemLayout}>
                <Button type="primary" size="large" onClick={this.onSubmit} style={{ marginRight: 10 }}>保存</Button>
                <Button size="large" onClick={() => location.href = '#/setting/media/manager'}>返回列表</Button>
            </Form.Item>
        </Form>
    }
}